<template>
  <div>
    <el-form :inline="true" :model="queryForm" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="queryForm.searchValue" placeholder="请输入来源"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="query">查询</el-button>
        <el-button type="primary" @click="handleCreate()">新建</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="page.items"   border style="width: 100%">

      <el-table-column align="center" label="id" min-width="200px">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="书名">
        <template scope="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="价格">
        <template scope="scope">
          <span>{{scope.row.price}}</span>
        </template>
      </el-table-column>
      <el-table-column min-width="200px" align="center" label="来源">
        <template scope="scope">
          <span>{{scope.row.source}}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" align="center" label="操作" width="150">
        <template scope="scope">
          <el-button  size="mini" type="primary" @click="handleEdit(scope.index,scope.row)">编辑
          </el-button>
          <el-button  size="mini" type="danger" @click="handleDelete(scope.index,scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <page :page.once="page" :query.once="queryForm" ref="page"></page>
    <deleteDialog v-on:deleteCon="deleteSubmit" :deleteObj="deleteObj" deleteMsg="该文章" :dialogDeleteVisible="dialogDeleteFormVisible"></deleteDialog>

    <el-dialog title="新建" :visible.sync="dialogFormVisible">
      <el-form :model="formData" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入书名"></el-input>
        </el-form-item>
        <el-form-item label="价格" prop="price">
          <el-input v-model="formData.price" placeholder="请输入价格"></el-input>
        </el-form-item>
        <el-form-item label="来源" prop="source">
          <el-input v-model="formData.source" placeholder="请输入来源"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelBox()">取 消</el-button>
        <el-button  type="primary" @click="formValidate()" :loading="isloading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from 'vue'
  import page from '../common/page.vue'
  import utils from '../../assets/util/utils';
  import {mixin}from '../../assets/util/mixin';
  import {ELKURL, ERR_MSG, MENUID, URL} from "../../assets/constants/constant-common"
  import { addBook,editBook } from '@/api/elk'
  export default {
    data() {
      return {
        createData: {formId:-1,
          id : null,
          name : null,
          price : null,
          source : null
        },
        rules: {
          name: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
            {
              min: 3,
              max: 20,
              message: '长度在 3 到 20 个字符',
              trigger: 'blur'
            }
          ]      },
        queryForm:{name:"source",
          searchValue:null
        },
        menuId:ELKURL+MENUID.getBook,
        deleteUrl:ELKURL+MENUID.deleteBook,



      }
    },
    created() {
      this.formData=utils.clone(this.createData);

    },
    mixins: [mixin],
    methods: {
      formSubmit:function () {
        let id=this.formData.formId;
        if(id===-1){
          addBook(this.formData).then(response => {
            this.sleep(1000);  //elastic存在延迟，等待1s后查询
            this.query()
            this.dialogFormVisible=false;
            this.setMsg("创建成功，显示可能存在延迟");
          }, function (response) {
            this.isloading=false;

          });
        }else{
          editBook(this.formData).then(response => {
            this.sleep(1000);
            this.query()
            this.setMsg("修改成功，显示可能存在延迟");
            this.dialogFormVisible = false
          }, function (response) {
            this.isloading=false;
          });
        }

      },
      sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
          now = new Date();
          if (now.getTime() > exitTime) return;
        }

      }
    }
  }
</script>
